{% load static %}<html class="text-[15px]">
<head>
    {{ 'DOCS_HEAD'|env }}
    <title>{{ meta_title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static 'app.css' %}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400..800&display=swap" rel="stylesheet">
    <link rel="icon" type="image/svg+xml" href="{% static 'favicon/favicon.svg' %}">
    <link rel="icon" type="image/png" href="{% static 'favicon/favicon.png' %}">

    <script src="{% static 'highlight/highlight.min.js' %}"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
    <script defer src="{% static 'alpine3.min.js' %}"></script>
    <link href="{% static 'highlight/styles/atom-one-dark.min.css' %}" rel="stylesheet" />
    <script>
        hljs.highlightAll();
    </script>

    <script>
        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
        // Default to dark mode if no preference is set
        if (localStorage.theme === 'dark' || !('theme' in localStorage)) {
          document.documentElement.classList.add('dark')
        } else {
          document.documentElement.classList.remove('dark')
        }
    </script>
    <style>
        /* alpine */
        [x-cloak] { display: none }
        /* lastpass */
        div[data-lastpass-icon-root] { display: none }
    </style>
</head>
<body class="bg-amber-50 dark:bg-gray-900 flex flex-col min-h-screen bg-fixed text-[16.5px] antialiased">
    <c-navbar />

    <div class="flex-1">
        {{ slot }}
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('tabs', () => ({
                tabs: [],
                active: 0,
                tabs_id: undefined,
                updateTab(index) {
                    this.active = index;
                    this.$dispatch(`tab-change`, {
                        tabs_id: this.tabs_id,
                        index: index,
                    });
                },
                onTabChange(event) {
                    if (event.detail.tabs_id === this.tabs_id) {
                        console.log('true')
                        this.active = event.detail.index;
                    }
                },
            }))

            // Global syntax preference store
            Alpine.store('syntaxPreference', localStorage.getItem('cotton-syntax-preference') || 'html');

            // Watch for changes and persist to localStorage
            Alpine.effect(() => {
                localStorage.setItem('cotton-syntax-preference', Alpine.store('syntaxPreference'));
            });
        })
    </script>
</body>
</html>